<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<!-- <link rel="stylesheet" href="../../component/pear/css/pear.css" /> -->
	<link rel="stylesheet" href="../../component/layui/css/layui.css" media="all" />
</head>

<body style="background-color: #F5F5F5">
	<div class="layui-row layui-col-space10">
		<div class="layui-card layui-col-md4">
			<div class="layui-card-body">
				<form id="form" class="layui-form" action="http://localhost/LSTM_car_comment/public/web/sjjc/update">
					<div class="layui-form-item">
						<p style="font-size: 20px; text-align: center;">请选择您要查看的信息</p>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">车型</label>
						<div class="layui-input-block">
							<input type="checkbox" name="carModel[]" title="奥迪A4L" value="奥迪A4L" lay-skin="primary">
							<input type="checkbox" name="carModel[]" title="奥迪A3 " value="奥迪A3" lay-skin="primary">
							<input type="checkbox" name="carModel[]" title="奥迪A5 " value="奥迪A5" lay-skin="primary">
							<input type="checkbox" name="carModel[]" title="奥迪A6L" value="奥迪A6L" lay-skin="primary">
							<input type="checkbox" name="carModel[]" title="奥迪A7 " value="奥迪A7" lay-skin="primary">
							<input type="checkbox" name="carModel[]" title="奥迪Q3 " value="奥迪Q3" lay-skin="primary">
							<input type="checkbox" name="carModel[]" title="奥迪Q5L" value="奥迪Q5L" lay-skin="primary">
							<input type="checkbox" name="carModel[]" title="奥迪Q7 " value="奥迪Q7" lay-skin="primary">
							<input type="checkbox" name="carModel[]" title="奥迪S5 " value="奥迪S5" lay-skin="primary">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">主题</label>
						<div class="layui-input-block">
							<input type="checkbox" name="Theme[]" title="油耗" value="油耗" lay-skin="primary">
							<input type="checkbox" name="Theme[]" title="空间" value="空间" lay-skin="primary">
							<input type="checkbox" name="Theme[]" title="动力" value="动力" lay-skin="primary">
							<input type="checkbox" name="Theme[]" title="操控" value="操控" lay-skin="primary">
							<input type="checkbox" name="Theme[]" title="外观" value="外观" lay-skin="primary">
							<input type="checkbox" name="Theme[]" title="内饰" value="内饰" lay-skin="primary">
							<input type="checkbox" name="Theme[]" title="舒适性" value="舒适性" lay-skin="primary">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">起始日期</label>
						<div class="layui-input-inline">
							<input type="text" name="startDate" id="sDate" lay-verify="date" placeholder="请输入日期"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">截止日期</label>
						<div class="layui-input-inline">
							<input type="text" name="endDate" id="eDate" lay-verify="date" placeholder="请输入日期"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="submit">查看</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card layui-col-md8">
			<div class="layui-card-body">
				<div id="line4" style="width: 95%;height: 400px;"> </div>
			</div>
		</div>
	</div>
	<script src="../../mini/js/lay-module/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../component/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<!-- 		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
		<script src="../../mini/js/jquery.form.js" type="text/javascript" charset="utf-8"></script> -->
	<script type="text/javascript">
		layui.config({
			base: '../../mini/js/lay-module/echarts/', // 基础路径
			echarts: './echarts.js' // 文件名
		})
		layui.use(['form', 'laydate', 'echarts'], function () {
			var $ = layui.jquery;
			var form = layui.form;
			var laydate = layui.laydate;
			var echarts = layui.echarts;
			//日期选择
			form.render();
			laydate.render({
				elem: '#sDate',
				trigger: 'click'
			});
			laydate.render({
				elem: '#eDate',
				trigger: 'click'
			});

			//表格初始化
			var line4 = echarts.init(document.getElementById('line4'));
			const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
			$.get('http://localhost/LSTM_car_comment/public/web/sjjc/init', function (data) {
				option = {
					title: {
						text: '评论数量'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {

					},
					dataset: {
						dimensions: ['year', '负面评论', '正面评论'],
						source: data,
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '负面评论',
						type: 'line',
						stack: '总量',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						color: ['#EE6666'],
					},
					{
						name: '正面评论',
						type: 'line',
						stack: '总量',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						color: ['#91CC75'],
					}
					]
				};
				line4.setOption(option);
			});
			//表单提交
			form.on('submit(submit)', function (data) {
				$.post('http://localhost/LSTM_car_comment/public/web/sjjc/update', data.field, function (res) {
					//res就是返回的结果
					console.log(res);
					line4.setOption({
						dataset: {
							source: res,
						}
					});
				});
				return false;
			});

			// function refreshData(data){
			//      //刷新数据
			//       var option = line4.getOption();
			//       option.dataset.source = data;
			//       line4.setOption(option);

			// }
			window.onresize = function () {
				line4.resize();
			}
		});
	</script>

</html>